<template>
	<view class="collect_answer-page">
		<view class="collect_answer-page-header">
			<mynavBar :title="title" :backgrouncolor="backgrouncolor" :gps="gps" :bgcolor="bgColor"></mynavBar>
		</view>
		<view class="collect_answer-page-content">
			<view class="collect-list-content">

				<view class="collect-answer-content-body">
					<view class="content-body-list" v-for="(item,index) in list.data_list" :key="item.id"
						@click="goquestiindetals(item.article.id)">
						<!-- <img :src="queryIconImage(`myquestionlogo1`)" alt="" class="body-list-img"> -->

						<view class="content-body-tetx">

							<view class="body-tetx-left">
								<view class="tetx-left-title">
									{{item.article.title}}
								</view>

								<!-- <view class="tetx-left-title">回答:{{item?.article_comment?.content}}</view> -->

								<span>{{Time(item.created_at)}}</span>
								<span style="padding:0 30rpx;">已有{{item.article.article_comment.length}}个回答</span>
								<span>{{item.article.follow.length}}个关注</span>

							</view>


						</view>

					</view>
				</view>
			</view>



		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		Time
	} from "@/utils/timenew.js"
	export default {
		data() {
			return {
				gps: '',
				title: '关注的提问',
				backgrouncolor: '#fff',
				bgColor: 'rgba(165, 42, 42, 0)',
				// 数据
				list: []
			};
		},
		computed: {
			...mapState({
				iconList: state => state.remote?.iconList?.data_list ?? []
			})
		},
		onLoad() {
			//#ifdef MP-WEIXIN
			let arr = wx.getMenuButtonBoundingClientRect()
			this.gps = arr.top
			//#endif
			this.getlist()
		},
		methods: {
			Time,
			getlist() {
				let userId = uni.getStorageSync('userInfo').id
				this.$store.dispatch("remote/query", {
					model: "follow",
					limit: -1,
					where: {
						user_user: {
							_eq: userId
						}
					},
					order_by: {
						created_at: "desc"
					},
					field_string: `id created_at article{id follow{id} title article_comment{ id user_user article_comment_parent_article_comment article_comment_reply_id article_article}}`,
				}).then(res => {
					console.log("res", res);
					if (res.data_list.length != 0) {
						res.data.article.article_comment = res.data.article.article_comment.filter(rs => rs
							.user_user ==
							userId && rs.article_comment_reply_id == null && rs
							.article_comment_parent_article_comment == null && rs.article_article == res.data
							.article.id)

						this.list = res
						console.log("res", this.list);
					}

				})
			},
			goquestiindetals(id) {
				console.log(id);
				uni.navigateTo({
					url: `/pages_a/questiondetails/questiondetails?id=${id}`
				})
			},
		}

	}
</script>

<style lang="scss">
	.collect_answer-page {
		width: 100%;
		height: 100vh;
		background-color: #ffffff;

		.collect_answer-page-header {
			width: 100%;
			height: 343rpx;
		}

		.collect_answer-page-content {
			width: 100%;
			height: 100%;
			margin-top: -150rpx;

			.collect-list-content {
				width: 750rpx;
				height: 80rpx;
				border-radius: 30rpx 30rpx 0rpx 0rpx;
				box-shadow: 0px -10rpx 10rpx 0px rgba(0, 0, 0, 0.1);

				.collect-answer-content-body {
					flex: 1;
					background-color: #fff;
					overflow: hidden;
					overflow-y: auto;
					width: 100%;
					box-sizing: border-box;
					padding: 0 25rpx 0 30rpx;
					border-radius: 30rpx 30rpx 0rpx 0rpx;

					.content-body-list {
						width: 100%;
						height: 170rpx;
						box-sizing: border-box;
						border-bottom: 2rpx dashed #ccc;
						padding: 30rpx 10rpx 10rpx 10rpx;
						display: flex;
						align-items: center;

						.body-list-img {
							width: 39rpx;
							margin-right: 8rpx;
							height: 36rpx;
						}

						.content-body-tetx {
							flex: 1;
							align-items: flex-start;
							display: flex;
							justify-content: space-between;

							.body-tetx-left {
								width: 100%;
								height: 42px;
								font-size: 24rpx;
								font-family: Source Han Sans CN-Regular, Source Han Sans CN;
								font-weight: 500;
								color: #999999;
								line-height: 45rpx;
								padding-left: 10px;

								.tetx-left-title {
									font-size: 30rpx;
									font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
									font-weight: 500;
									color: #5F5F5F;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									line-height: 42rpx;
									margin-bottom: 10rpx;
								}
							}

							.body-tetx-right-y {
								text-align: right;
								flex: 1;
								font-size: 24rpx;
								font-family: Source Han Sans CN-Regular, Source Han Sans CN;
								font-weight: 400;
								color: #F09500;
								line-height: 85rpx;
							}

							.body-tetx-right-n {
								text-align: right;
								flex: 1;
								font-size: 24rpx;
								font-family: Source Han Sans CN-Regular, Source Han Sans CN;
								font-weight: 400;
								color: #999999;
								line-height: 85rpx;
							}
						}
					}
				}


			}
		}
	}
</style>